<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Vendor styles -->
        <link rel="stylesheet" href="vendors/bower_components/material-design-iconic-font/dist/css/material-design-iconic-font.min.css">
        <link rel="stylesheet" href="vendors/bower_components/animate.css/animate.min.css">
        <link rel="stylesheet" href="vendors/bower_components/jquery.scrollbar/jquery.scrollbar.css">
        <link rel="stylesheet" href="vendors/bower_components/select2/dist/css/select2.min.css">
        <link rel="stylesheet" href="vendors/bower_components/dropzone/dist/dropzone.css">
        <link rel="stylesheet" href="vendors/bower_components/flatpickr/dist/flatpickr.min.css" />
        <link rel="stylesheet" href="vendors/bower_components/nouislider/distribute/nouislider.min.css">
        <link rel="stylesheet" href="vendors/bower_components/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css">
        <link rel="stylesheet" href="vendors/bower_components/trumbowyg/dist/ui/trumbowyg.min.css">
        <link rel="stylesheet" href="vendors/bower_components/rateYo/min/jquery.rateyo.min.css">

        <!-- App styles -->
        <link rel="stylesheet" href="css/app.min.css">

        <!-- Demo only -->
        <!-- <link rel="stylesheet" href="demo/css/demo.css"> -->
    </head>

    <body data-sa-theme="1">
        <main class="main">
            <div class="page-loader">
                <div class="page-loader__spinner">
                    <svg viewBox="25 25 50 50">
                        <circle cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />
                    </svg>
                </div>
            </div>

            <header class="header">
                <div class="navigation-trigger hidden-xl-up" data-sa-action="aside-open" data-sa-target=".sidebar">
                    <i class="zmdi zmdi-menu"></i>
                </div>

                <div class="logo hidden-sm-down">
                    <h1><a href="index.html">Super Admin 2.0</a></h1>
                </div>

                <form class="search">
                    <div class="search__inner">
                        <input type="text" class="search__text" placeholder="Search for people, files, documents...">
                        <i class="zmdi zmdi-search search__helper" data-sa-action="search-close"></i>
                    </div>
                </form>

                <ul class="top-nav">
                    <li class="hidden-xl-up"><a href="" data-sa-action="search-open"><i class="zmdi zmdi-search"></i></a></li>

                    <li class="dropdown">
                        <a href="" data-toggle="dropdown" class="top-nav__notify"><i class="zmdi zmdi-email"></i></a>
                        <div class="dropdown-menu dropdown-menu-right dropdown-menu--block">
                            <div class="dropdown-header">
                                Messages

                                <div class="actions">
                                    <a href="messages.html" class="actions__item zmdi zmdi-plus"></a>
                                </div>
                            </div>

                            <div class="listview listview--hover">
                                <a href="" class="listview__item">
                                    <img src="demo/img/profile-pics/1.jpg" class="listview__img" alt="">

                                    <div class="listview__content">
                                        <div class="listview__heading">
                                            David Belle <small>12:01 PM</small>
                                        </div>
                                        <p>Cum sociis natoque penatibus et magnis dis parturient montes</p>
                                    </div>
                                </a>

                                <a href="" class="listview__item">
                                    <img src="demo/img/profile-pics/2.jpg" class="listview__img" alt="">

                                    <div class="listview__content">
                                        <div class="listview__heading">
                                            Jonathan Morris
                                            <small>02:45 PM</small>
                                        </div>
                                        <p>Nunc quis diam diamurabitur at dolor elementum, dictum turpis vel</p>
                                    </div>
                                </a>

                                <a href="" class="listview__item">
                                    <img src="demo/img/profile-pics/3.jpg" class="listview__img" alt="">

                                    <div class="listview__content">
                                        <div class="listview__heading">
                                            Fredric Mitchell Jr.
                                            <small>08:21 PM</small>
                                        </div>
                                        <p>Phasellus a ante et est ornare accumsan at vel magnauis blandit turpis at augue ultricies</p>
                                    </div>
                                </a>

                                <a href="" class="listview__item">
                                    <img src="demo/img/profile-pics/4.jpg" class="listview__img" alt="">

                                    <div class="listview__content">
                                        <div class="listview__heading">
                                            Glenn Jecobs
                                            <small>08:43 PM</small>
                                        </div>
                                        <p>Ut vitae lacus sem ellentesque maximus, nunc sit amet varius dignissim, dui est consectetur neque</p>
                                    </div>
                                </a>

                                <a href="" class="listview__item">
                                    <img src="demo/img/profile-pics/5.jpg" class="listview__img" alt="">

                                    <div class="listview__content">
                                        <div class="listview__heading">
                                            Bill Phillips
                                            <small>11:32 PM</small>
                                        </div>
                                        <p>Proin laoreet commodo eros id faucibus. Donec ligula quam, imperdiet vel ante placerat</p>
                                    </div>
                                </a>

                                <a href="" class="view-more">View all messages</a>
                            </div>
                        </div>
                    </li>

                    <li class="dropdown top-nav__notifications">
                        <a href="" data-toggle="dropdown" class="top-nav__notify">
                            <i class="zmdi zmdi-notifications"></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right dropdown-menu--block">
                            <div class="dropdown-header">
                                Notifications

                                <div class="actions">
                                    <a href="" class="actions__item zmdi zmdi-check-all" data-sa-action="notifications-clear"></a>
                                </div>
                            </div>

                            <div class="listview listview--hover">
                                <div class="listview__scroll scrollbar-inner">
                                    <a href="" class="listview__item">
                                        <img src="demo/img/profile-pics/1.jpg" class="listview__img" alt="">

                                        <div class="listview__content">
                                            <div class="listview__heading">David Belle</div>
                                            <p>Cum sociis natoque penatibus et magnis dis parturient montes</p>
                                        </div>
                                    </a>

                                    <a href="" class="listview__item">
                                        <img src="demo/img/profile-pics/2.jpg" class="listview__img" alt="">

                                        <div class="listview__content">
                                            <div class="listview__heading">Jonathan Morris</div>
                                            <p>Nunc quis diam diamurabitur at dolor elementum, dictum turpis vel</p>
                                        </div>
                                    </a>

                                    <a href="" class="listview__item">
                                        <img src="demo/img/profile-pics/3.jpg" class="listview__img" alt="">

                                        <div class="listview__content">
                                            <div class="listview__heading">Fredric Mitchell Jr.</div>
                                            <p>Phasellus a ante et est ornare accumsan at vel magnauis blandit turpis at augue ultricies</p>
                                        </div>
                                    </a>

                                    <a href="" class="listview__item">
                                        <img src="demo/img/profile-pics/4.jpg" class="listview__img" alt="">

                                        <div class="listview__content">
                                            <div class="listview__heading">Glenn Jecobs</div>
                                            <p>Ut vitae lacus sem ellentesque maximus, nunc sit amet varius dignissim, dui est consectetur neque</p>
                                        </div>
                                    </a>

                                    <a href="" class="listview__item">
                                        <img src="demo/img/profile-pics/5.jpg" class="listview__img" alt="">

                                        <div class="listview__content">
                                            <div class="listview__heading">Bill Phillips</div>
                                            <p>Proin laoreet commodo eros id faucibus. Donec ligula quam, imperdiet vel ante placerat</p>
                                        </div>
                                    </a>

                                    <a href="" class="listview__item">
                                        <img src="demo/img/profile-pics/1.jpg" class="listview__img" alt="">

                                        <div class="listview__content">
                                            <div class="listview__heading">David Belle</div>
                                            <p>Cum sociis natoque penatibus et magnis dis parturient montes</p>
                                        </div>
                                    </a>

                                    <a href="" class="listview__item">
                                        <img src="demo/img/profile-pics/2.jpg" class="listview__img" alt="">

                                        <div class="listview__content">
                                            <div class="listview__heading">Jonathan Morris</div>
                                            <p>Nunc quis diam diamurabitur at dolor elementum, dictum turpis vel</p>
                                        </div>
                                    </a>

                                    <a href="" class="listview__item">
                                        <img src="demo/img/profile-pics/3.jpg" class="listview__img" alt="">

                                        <div class="listview__content">
                                            <div class="listview__heading">Fredric Mitchell Jr.</div>
                                            <p>Phasellus a ante et est ornare accumsan at vel magnauis blandit turpis at augue ultricies</p>
                                        </div>
                                    </a>
                                </div>

                                <div class="p-1"></div>
                            </div>
                        </div>
                    </li>

                    <li class="dropdown hidden-xs-down">
                        <a href="" data-toggle="dropdown"><i class="zmdi zmdi-check-circle"></i></a>

                        <div class="dropdown-menu dropdown-menu-right dropdown-menu--block" role="menu">
                            <div class="dropdown-header">Tasks</div>

                            <div class="listview listview--hover">
                                <a href="" class="listview__item">
                                    <div class="listview__content">
                                        <div class="listview__heading">HTML5 Validation Report</div>

                                        <div class="progress mt-1">
                                            <div class="progress-bar bg-primary" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                </a>

                                <a href="" class="listview__item">
                                    <div class="listview__content">
                                        <div class="listview__heading">Google Chrome Extension</div>

                                        <div class="progress mt-1">
                                            <div class="progress-bar bg-warning" style="width: 43%" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                </a>

                                <a href="" class="listview__item">
                                    <div class="listview__content">
                                        <div class="listview__heading">Social Intranet Projects</div>

                                        <div class="progress mt-1">
                                            <div class="progress-bar bg-success" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                </a>

                                <a href="" class="listview__item">
                                    <div class="listview__content">
                                        <div class="listview__heading">Bootstrap Admin Template</div>

                                        <div class="progress mt-1">
                                            <div class="progress-bar bg-info" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                </a>

                                <a href="" class="listview__item">
                                    <div class="listview__content">
                                        <div class="listview__heading">Youtube Client App</div>

                                        <div class="progress mt-1">
                                            <div class="progress-bar bg-danger" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                </a>

                                <a href="" class="view-more">View all Tasks</a>
                            </div>
                        </div>
                    </li>

                    <li class="dropdown hidden-xs-down">
                        <a href="" data-toggle="dropdown"><i class="zmdi zmdi-apps"></i></a>

                        <div class="dropdown-menu dropdown-menu-right dropdown-menu--block" role="menu">
                            <div class="row app-shortcuts">
                                <a class="col-4 app-shortcuts__item" href="">
                                    <i class="zmdi zmdi-calendar"></i>
                                    <small class="">Calendar</small>
                                </a>
                                <a class="col-4 app-shortcuts__item" href="">
                                    <i class="zmdi zmdi-file-text"></i>
                                    <small class="">Files</small>
                                </a>
                                <a class="col-4 app-shortcuts__item" href="">
                                    <i class="zmdi zmdi-email"></i>
                                    <small class="">Email</small>
                                </a>
                                <a class="col-4 app-shortcuts__item" href="">
                                    <i class="zmdi zmdi-trending-up"></i>
                                    <small class="">Reports</small>
                                </a>
                                <a class="col-4 app-shortcuts__item" href="">
                                    <i class="zmdi zmdi-view-headline"></i>
                                    <small class="">News</small>
                                </a>
                                <a class="col-4 app-shortcuts__item" href="">
                                    <i class="zmdi zmdi-image"></i>
                                    <small class="">Gallery</small>
                                </a>
                            </div>
                        </div>
                    </li>

                    <li class="dropdown hidden-xs-down">
                        <a href="" data-toggle="dropdown"><i class="zmdi zmdi-more-vert"></i></a>

                        <div class="dropdown-menu dropdown-menu-right">
                            <a href="" class="dropdown-item" data-sa-action="fullscreen">Fullscreen</a>
                            <a href="" class="dropdown-item">Clear Local Storage</a>
                            <a href="" class="dropdown-item">Settings</a>
                        </div>
                    </li>

                    <li class="hidden-xs-down">
                        <a href="" class="top-nav__themes" data-sa-action="aside-open" data-sa-target=".themes"><i class="zmdi zmdi-palette"></i></a>
                    </li>
                </ul>

                <div class="clock hidden-md-down">
                    <div class="time">
                        <span class="time__hours"></span>
                        <span class="time__min"></span>
                        <span class="time__sec"></span>
                    </div>
                </div>
            </header>

            <aside class="sidebar">
                <div class="scrollbar-inner">

                    <div class="user">
                        <div class="user__info" data-toggle="dropdown">
                            <img class="user__img" src="demo/img/profile-pics/8.jpg" alt="">
                            <div>
                                <div class="user__name">Malinda Hollaway</div>
                                <div class="user__email">malinda-h@gmail.com</div>
                            </div>
                        </div>

                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="">View Profile</a>
                            <a class="dropdown-item" href="">Settings</a>
                            <a class="dropdown-item" href="">Logout</a>
                        </div>
                    </div>

                    <ul class="navigation">
                        <li class="@@indexactive"><a href="index.html"><i class="zmdi zmdi-home"></i> Home</a></li>

                        <li class="navigation__sub @@variantsactive">
                            <a href=""><i class="zmdi zmdi-view-week"></i> Variants</a>

                            <ul>
                                <li class="@@sidebaractive"><a href="hidden-sidebar.html">Hidden Sidebar</a></li>
                                <li class="@@boxedactive"><a href="boxed-layout.html">Boxed Layout</a></li>
                                <li class="@@hiddensidebarboxedactive"><a href="hidden-sidebar-boxed-layout.html">Boxed Layout with Hidden Sidebar</a></li>
                            </ul>
                        </li>

                        <li class="@@typeactive"><a href="typography.html"><i class="zmdi zmdi-format-underlined"></i> Typography</a></li>

                        <li class="@@widgetactive"><a href="widgets.html"><i class="zmdi zmdi-widgets"></i> Widgets</a></li>

                        <li class="navigation__sub @@tableactive">
                            <a href=""><i class="zmdi zmdi-view-list"></i> Tables</a>

                            <ul>
                                <li class="@@normaltableactive"><a href="html-table.html">HTML Table</a></li>
                                <li class="@@datatableactive"><a href="data-table.html">Data Table</a></li>
                            </ul>
                        </li>

                        <li class="navigation__sub navigation__sub--active navigation__sub--toggled">
                            <a href=""><i class="zmdi zmdi-collection-text"></i> Forms</a>

                            <ul>
                                <li class="@@formelementactive"><a href="form-elements.html">Basic Form Elements</a></li>
                                <li class="navigation__active"><a href="form-components.html">Form Components</a></li>
                                <li class="@@formvalidationactive"><a href="form-validation.html">Form Validation</a></li>
                            </ul>
                        </li>

                        <li class="navigation__sub @@uiactive">
                            <a href=""><i class="zmdi zmdi-swap-alt"></i> User Interface</a>

                            <ul>
                                <li class="@@colorsactive"><a href="colors.html">Colors</a></li>
                                <li class="@@cssanimationsactive"><a href="css-animations.html">CSS Animations</a></li>
                                <li class="@@buttonsactive"><a href="buttons.html">Buttons</a></li>
                                <li class="@@iconsactive"><a href="icons.html">Icons</a></li>
                                <li class="@@listviewactive"><a href="listview.html">Listview</a></li>
                                <li class="@@toolbarsactive"><a href="toolbars.html">Toolbars</a></li>
                                <li class="@@cardsactive"><a href="cards.html">Cards</a></li>
                                <li class="@@alertactive"><a href="alerts.html">Alerts</a></li>
                                <li class="@@badgesactive"><a href="badges.html">Badges</a></li>
                                <li class="@@breadcrumbsactive"><a href="breadcrumbs.html">Bredcrumbs</a></li>
                                <li class="@@jumbotronactive"><a href="jumbotron.html">Jumbotron</a></li>
                                <li class="@@navsactive"><a href="navs.html">Navs</a></li>
                                <li class="@@paginationactive"><a href="pagination.html">Pagination</a></li>
                                <li class="@@progressactive"><a href="progress.html">Progress</a></li>
                            </ul>
                        </li>

                        <li class="navigation__sub @@componentsactive">
                            <a href=""><i class="zmdi zmdi-group-work"></i> Javascript Components</a>

                            <ul class="navigation__sub">
                                <li class="@@carouselactive"><a href="carousel.html">Carousel</a></li>
                                <li class="@@collapseactive"><a href="collapse.html">Collapse</a></li>
                                <li class="@@dropdownsactive"><a href="dropdowns.html">Dropdowns</a></li>
                                <li class="@@modalsactive"><a href="modals.html">Modals</a></li>
                                <li class="@@popoveractive"><a href="popover.html">Popover</a></li>
                                <li class="@@tabsactive"><a href="tabs.html">Tabs</a></li>
                                <li class="@@tooltipsactive"><a href="tooltips.html">Tooltips</a></li>
                                <li class="@@notificationsactive"><a href="notifications-alerts.html">Notifications & Alerts</a></li>
                                <li class="@@treeactive"><a href="treeview.html">Tree View</a></li>
                            </ul>
                        </li>

                        <li class="navigation__sub @@chartsactive">
                            <a href=""><i class="zmdi zmdi-trending-up"></i> Charts</a>

                            <ul>
                                <li class="@@flotchartsactive"><a href="flot-charts.html">Flot</a></li>
                                <li class="@@otherchartsactive"><a href="other-charts.html">Other Charts</a></li>
                            </ul>
                        </li>

                        <li class="@@calendaractive"><a href="calendar.html"><i class="zmdi zmdi-calendar"></i> Calendar</a></li>

                        <li class="@@photogalleryactive"><a href="photo-gallery.html"><i class="zmdi zmdi-image"></i> Photo Gallery</a></li>

                        <li class="navigation__sub @@samplepagesactive">
                            <a href=""><i class="zmdi zmdi-collection-item"></i> Sample Pages</a>

                            <ul>
                                <li class="@@profileactive"><a href="profile-about.html">Profile</a></li>
                                <li class="@@messagesactive"><a href="messages.html">Messages</a></li>
                                <li class="@@contactsactive"><a href="contacts.html">Contacts</a></li>
                                <li class="@@newcontactsactive"><a href="new-contact.html">New Contact</a></li>
                                <li class="@@groupsactive"><a href="groups.html">Groups</a></li>
                                <li class="@@pricingtablesactive"><a href="pricing-tables.html">Pricing Tables</a></li>
                                <li class="@@invoiceactive"><a href="invoice.html">Invoice</a></li>
                                <li class="@@todoactive"><a href="todo-lists.html">Todo Lists</a></li>
                                <li class="@@notesactive"><a href="notes.html">Notes</a></li>
                                <li class="@@searchresultsactive"><a href="search-results.html">Search Results</a></li>
                                <li class="@@issuesactive"><a href="issue-tracker.html">Issues Tracker</a></li>
                                <li class="@@faqactive"><a href="faq.html">FAQ</a></li>
                                <li class="@@teamactive"><a href="team.html">Team</a></li>
                                <li class="@@blogactive"><a href="blog.html">Blog</a></li>
                                <li class="@@blogdetailactive"><a href="blog-detail.html">Blog Detail</a></li>
                                <li class="@@qaactive"><a href="questions-answers.html">Questions & Answers</a></li>
                                <li class="@@qadetailactive"><a href="questions-answers-details.html">Questions & Answers Details</a></li>
                                <li class="@@loginactive"><a href="login.html">Login & SignUp</a></li>
                                <li class="@@lockscreenactive"><a href="lockscreen.html">Lockscreen</a></li>
                                <li class="@@lockscreenactive"><a href="404.html">404</a></li>
                                <li class="@@emptyactive"><a href="empty.html">Empty Page</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </aside>

            <div class="themes">
    <div class="scrollbar-inner">
        <a href="" class="themes__item active" data-sa-value="1"><img src="img/bg/1.jpg" alt=""></a>
        <a href="" class="themes__item" data-sa-value="2"><img src="img/bg/2.jpg" alt=""></a>
        <a href="" class="themes__item" data-sa-value="3"><img src="img/bg/3.jpg" alt=""></a>
        <a href="" class="themes__item" data-sa-value="4"><img src="img/bg/4.jpg" alt=""></a>
        <a href="" class="themes__item" data-sa-value="5"><img src="img/bg/5.jpg" alt=""></a>
        <a href="" class="themes__item" data-sa-value="6"><img src="img/bg/6.jpg" alt=""></a>
        <a href="" class="themes__item" data-sa-value="7"><img src="img/bg/7.jpg" alt=""></a>
        <a href="" class="themes__item" data-sa-value="8"><img src="img/bg/8.jpg" alt=""></a>
        <a href="" class="themes__item" data-sa-value="9"><img src="img/bg/9.jpg" alt=""></a>
        <a href="" class="themes__item" data-sa-value="10"><img src="img/bg/10.jpg" alt=""></a>
    </div>
</div>

            <section class="content">
                <div class="content__inner">
                    <header class="content__title">
                        <h1>Form Components</h1>

                        <div class="actions">
                            <a href="" class="actions__item zmdi zmdi-trending-up"></a>
                            <a href="" class="actions__item zmdi zmdi-check-all"></a>

                            <div class="dropdown actions__item">
                                <i data-toggle="dropdown" class="zmdi zmdi-more-vert"></i>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a href="" class="dropdown-item">Refresh</a>
                                    <a href="" class="dropdown-item">Manage Widgets</a>
                                    <a href="" class="dropdown-item">Settings</a>
                                </div>
                            </div>
                        </div>
                    </header>

                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">Input group</h4>
                            <h6 class="card-subtitle">Easily extend form controls by adding text, buttons, or button groups on either side of textual <code>&#x3C;input&#x3E;</code>s.</h6>

                            <h3 class="card-body__title">Basic example</h3>
                            <p>Place one add-on or button on either side of an input. You may also place one on both sides of an input.</p>

                            <br>

                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="input-group">
                                        <span class="input-group-addon">@</span>
                                        <div class="form-group">
                                            <input type="text" class="form-control" placeholder="Username">
                                            <i class="form-group__bar"></i>
                                        </div>
                                    </div>

                                    <br>

                                    <div class="input-group">
                                        <span class="input-group-addon">https://example.com/users/</span>
                                        <div class="form-group">
                                            <input type="text" class="form-control">
                                            <i class="form-group__bar"></i>
                                        </div>
                                    </div>

                                    <br>

                                    <div class="input-group">
                                        <span class="input-group-addon">$</span>
                                        <span class="input-group-addon">0.00</span>
                                        <div class="form-group">
                                            <input type="text" class="form-control" placeholder="Discounted price">
                                            <i class="form-group__bar"></i>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-sm-6">
                                    <div class="input-group">
                                        <div class="form-group">
                                            <input type="text" class="form-control" placeholder="Recipient's username">
                                            <i class="form-group__bar"></i>
                                        </div>
                                        <span class="input-group-addon">@example.com</span>
                                    </div>

                                    <br>

                                    <div class="input-group">
                                        <span class="input-group-addon">$</span>
                                        <div class="form-group">
                                            <input type="text" class="form-control" placeholder="Enter amount">
                                            <i class="form-group__bar"></i>
                                        </div>
                                        <span class="input-group-addon">.00</span>
                                    </div>
                                </div>
                            </div>

                            <br>
                            <br>

                            <h3 class="card-body__title">Sizing</h3>
                            <p>Add the relative form sizing classes to the <code>.input-group</code> itself and contents within will automatically resize. No need for repeating the form control size classes on each element.</p>

                            <br>

                            <div class="input-group input-group-lg">
                                <span class="input-group-addon">@</span>
                                <span class="input-group-addon">@</span>
                                <span class="input-group-addon">@</span>
                                <div class="form-group">
                                    <input type="text" class="form-control form-control-lg" placeholder="Large">
                                    <i class="form-group__bar"></i>
                                </div>
                                <span class="input-group-addon">@</span>
                                <span class="input-group-addon">@</span>
                                <span class="input-group-addon">@</span>
                            </div>

                            <br>

                            <div class="input-group">
                                <span class="input-group-addon">@</span>
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Default">
                                    <i class="form-group__bar"></i>
                                </div>
                            </div>

                            <br>

                            <div class="input-group input-group-sm">
                                <span class="input-group-addon">@</span>
                                <div class="form-group">
                                    <input type="text" class="form-control form-control-sm" placeholder="Small">
                                    <i class="form-group__bar"></i>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">Input Masking</h4>
                            <h6 class="card-subtitle">A plugin to make masks on form fields for better instant validations.</h6>

                            <div class="row">
                                <div class="col-sm-3">
                                    <div class="form-group">
                                        <label>Date</label>
                                        <input type="text" class="form-control input-mask" data-mask="00/00/0000" placeholder="eg: 23/05/2014">
                                        <i class="form-group__bar"></i>
                                    </div>
                                </div>

                                <div class="col-sm-3">
                                    <div class="form-group">
                                        <label>Time</label>
                                        <input type="text" class="form-control input-mask" data-mask="00:00:00" placeholder="eg: 23:06:55">
                                        <i class="form-group__bar"></i>
                                    </div>
                                </div>

                                <div class="col-sm-3">
                                    <div class="form-group">
                                        <label>Date Time</label>
                                        <input type="text" class="form-control input-mask" data-mask="00/00/0000 00:00:00" placeholder="eg: 00/00/0000 00:00:00">
                                        <i class="form-group__bar"></i>
                                    </div>
                                </div>

                                <div class="col-sm-3">
                                    <div class="form-group">
                                        <label>CEP</label>
                                        <input type="text" class="form-control input-mask" data-mask="00000-000" placeholder="eg: 00000-000">
                                        <i class="form-group__bar"></i>
                                    </div>
                                </div>

                                <div class="col-sm-3">
                                    <div class="form-group">
                                        <label>Phone Number</label>
                                        <input type="text" class="form-control input-mask" data-mask="000-00-0000000" placeholder="eg: 000-00-0000000">
                                        <i class="form-group__bar"></i>
                                    </div>
                                </div>

                                <div class="col-sm-3">
                                    <div class="form-group">
                                        <label>Phone with Odd</label>
                                        <input type="text" class="form-control input-mask" data-mask="(00) 0000-0000" placeholder="eg: (00) 0000-0000">
                                        <i class="form-group__bar"></i>
                                    </div>
                                </div>

                                <div class="col-sm-3">
                                    <div class="form-group">
                                        <label>US Phone Number</label>
                                        <input type="text" class="form-control input-mask" data-mask="(000) 000-0000" placeholder="eg: (000) 000-0000">
                                        <i class="form-group__bar"></i>
                                    </div>
                                </div>

                                <div class="col-sm-3">
                                    <div class="form-group">
                                        <label>CPF</label>
                                        <input type="text" class="form-control input-mask" data-mask="000.000.000-00" placeholder="eg: 000.000.000-00">
                                        <i class="form-group__bar"></i>
                                    </div>
                                </div>

                                <div class="col-sm-3">
                                    <div class="form-group">
                                        <label>Money</label>
                                        <input type="text" class="form-control input-mask" data-mask="000.000.000.000.000,00" placeholder="eg: 000.000.000.000.000,00">
                                        <i class="form-group__bar"></i>
                                    </div>
                                </div>

                                <div class="col-sm-3 m-b-20">
                                    <div class="form-group">
                                        <label>IP Address</label>
                                        <input type="text" class="form-control input-mask" data-mask="000.000.000.000" placeholder="eg: 000.000.000.000">
                                        <i class="form-group__bar"></i>
                                    </div>
                                </div>

                                <div class="col-sm-3">
                                    <div class="form-group">
                                        <label>Percentage</label>
                                        <input type="text" class="form-control input-mask" data-mask="00000,00%" placeholder="eg: 00000,00%">
                                        <i class="form-group__bar"></i>
                                    </div>
                                </div>

                                <div class="col-sm-3">
                                    <div class="form-group">
                                        <label>Credit Card</label>
                                        <input type="text" class="form-control input-mask" data-mask="0000 0000 0000 0000" placeholder="eg: 0000 0000 0000 0000">
                                        <i class="form-group__bar"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">Select 2</h4>
                            <h6 class="card-subtitle">Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.</h6>

                            <div class="row">
                                <div class="col-sm-6 col-md-4">
                                    <div class="form-group">
                                        <label>Basic Example - Single Select</label>

                                        <select class="select2">
                                            <option>Subaru</option>
                                            <option>Mitsubishi</option>
                                            <option>Scion</option>
                                            <option>Daihatsu</option>
                                            <option>Hino</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-sm-6 col-md-4">
                                    <div class="form-group">
                                        <label>Disabled Select</label>

                                        <select class="select2" disabled>
                                            <option>&nbsp;</option>
                                            <option>Subaru</option>
                                            <option>Mitsubishi</option>
                                            <option>Scion</option>
                                            <option>Daihatsu</option>
                                            <option>Hino</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-sm-6 col-md-4">
                                    <div class="form-group">
                                        <label>Disabled Results</label>

                                        <select class="select2">
                                            <option>Subaru</option>
                                            <option>Mitsubishi</option>
                                            <option disabled>Scion</option>
                                            <option disabled>Daihatsu</option>
                                            <option>Hino</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-sm-6 col-md-4">
                                    <div class="form-group">
                                        <label>Hide Search Box</label>

                                        <select class="select2" data-minimum-results-for-search="Infinity">
                                            <option>Subaru</option>
                                            <option>Mitsubishi</option>
                                            <option disabled>Scion</option>
                                            <option disabled>Daihatsu</option>
                                            <option>Hino</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-sm-6 col-md-4">
                                    <div class="form-group">
                                        <label>Multiple</label>

                                        <select class="select2" multiple>
                                            <option>Subaru</option>
                                            <option>Mitsubishi</option>
                                            <option>Scion</option>
                                            <option>Daihatsu</option>
                                            <option>Hino</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">Drag and drop file upload</h4>
                            <h6 class="card-subtitle">DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews.</h6>

                            <form class="dropzone" id="dropzone-upload"></form>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">Toggle Switch</h4>
                            <h6 class="card-subtitle">Material design look alike Toggle Switches based on Radio Boxes</h6>

                            <div class="row">
                                <div class="col-sm-4 col-md-3">
                                    <h3 class="card-body__title">Basic Example</h3>

                                    <div class="form-group">
                                        <div class="toggle-switch">
                                            <input type="checkbox" class="toggle-switch__checkbox">
                                            <i class="toggle-switch__helper"></i>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-sm-4 col-md-3">
                                    <h3 class="card-body__title">Active State</h3>

                                    <div class="form-group">
                                        <div class="toggle-switch">
                                            <input type="checkbox" class="toggle-switch__checkbox" checked>
                                            <i class="toggle-switch__helper"></i>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-sm-4 col-md-3">
                                    <h3 class="card-body__title">Disabled</h3>

                                    <div class="form-group">
                                        <div class="toggle-switch">
                                            <input type="checkbox" class="toggle-switch__checkbox" disabled>
                                            <i class="toggle-switch__helper"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <h3 class="card-body__title">Color variants</h3>
                            <p>Optional color variants can be added using modifier classes</p>

                            <br>

                            <div class="demo-inline-wrapper">
                                <div class="form-group">
                                    <div class="toggle-switch toggle-switch--amber">
                                        <input type="checkbox" class="toggle-switch__checkbox">
                                        <i class="toggle-switch__helper"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="demo-inline-wrapper">
                                <div class="form-group">
                                    <div class="toggle-switch toggle-switch--blue">
                                        <input type="checkbox" class="toggle-switch__checkbox">
                                        <i class="toggle-switch__helper"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="demo-inline-wrapper">
                                <div class="form-group">
                                    <div class="toggle-switch toggle-switch--green">
                                        <input type="checkbox" class="toggle-switch__checkbox">
                                        <i class="toggle-switch__helper"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="demo-inline-wrapper">
                                <div class="form-group">
                                    <div class="toggle-switch toggle-switch--cyan">
                                        <input type="checkbox" class="toggle-switch__checkbox">
                                        <i class="toggle-switch__helper"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="demo-inline-wrapper">
                                <div class="form-group">
                                    <div class="toggle-switch toggle-switch--purple">
                                        <input type="checkbox" class="toggle-switch__checkbox">
                                        <i class="toggle-switch__helper"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="demo-inline-wrapper">
                                <div class="form-group">
                                    <div class="toggle-switch toggle-switch--teal">
                                        <input type="checkbox" class="toggle-switch__checkbox">
                                        <i class="toggle-switch__helper"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">Date Time Picker</h4>
                            <h6 class="card-subtitle">Flatpickr is a lightweight and powerful datetime picker.</h6>

                            <div class="row">
                                <div class="col-sm-4">
                                    <label>Date and time picker</label>

                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="zmdi zmdi-calendar"></i></span>
                                        <div class="form-group">
                                            <input type="text" class="form-control datetime-picker" placeholder="Pick a date & time">
                                            <i class="form-group__bar"></i>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-sm-4">
                                    <label>Date picker</label>

                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="zmdi zmdi-calendar"></i></span>
                                        <div class="form-group">
                                            <input type="text" class="form-control date-picker" placeholder="Pick a date">
                                            <i class="form-group__bar"></i>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-sm-4">
                                    <label>Time picker</label>

                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="zmdi zmdi-calendar"></i></span>
                                        <div class="form-group">
                                            <input type="text" class="form-control time-picker" placeholder="Pick a time">
                                            <i class="form-group__bar"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">Color Picker</h4>
                            <h6 class="card-subtitle">Simple color picker based on jQuery and Bootstrap.</h6>

                            <div class="row">
                                <div class="col-sm-4">
                                    <label>Basic example</label>

                                    <div class="input-group">

                                        <span class="input-group-addon"><i class="zmdi zmdi-invert-colors"></i></span>

                                        <div class="form-group color-picker">
                                            <input type="text" class="form-control color-picker__value" value="#03A9F4">
                                            <i class="color-picker__preview" style="background-color: #03A9F4"></i>

                                            <i class="form-group__bar"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">Input Sliders</h4>
                            <h6 class="card-subtitle">noUiSlider is a lightweight JavaScript range slider with tons of customizaion.</h6>

                            <div class="row">
                                <div class="col-md-6">
                                    <h3 class="card-body__title">Single slider</h3>

                                    <div id="input-slider"></div>

                                    <div class="row">
                                        <div class="col-6">
                                            <div class="form-group">
                                                <input type="text" class="form-control" id="input-slider-value" />
                                                <i class="form-group__bar"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <h3 class="card-body__title">Range Slider</h3>

                                    <div id="input-slider-range"></div>

                                    <div class="row">
                                        <div class="col-6">
                                            <div class="form-group">
                                                <input type="text" class="form-control" id="input-slider-range-value-1" />
                                                <i class="form-group__bar"></i>
                                            </div>
                                        </div>

                                        <div class="col-6">
                                            <div class="form-group">
                                                <input type="text" class="form-control" id="input-slider-range-value-2" />
                                                <i class="form-group__bar"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <br>
                            <br>

                            <h3 class="card-body__title">Color variants</h3>
                            <p>Optional color variants can be added using modifier classes</p>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="input-slider input-slider--blue"></div>

                                    <br>

                                    <div class="input-slider input-slider--red"></div>

                                    <br>
                                </div>

                                <div class="col-md-6">
                                    <div class="input-slider input-slider--amber"></div>

                                    <br>

                                    <div class="input-slider input-slider--green"></div>

                                    <br>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">Button Checkboxes and Radios</h4>
                            <h6 class="card-subtitle">Control button states or create groups of buttons for more components like toolbars.</h6>

                            <h3 class="card-body__title">Toggle states</h3>
                            <p>Add <code>data-toggle="button"</code> to toggle a button’s <code>active</code> state. If you’re pre-toggling a button, you must manually add the <code>.active</code> class and <code>aria-pressed="true"</code> to the &#x3C;button&#x3E;.</p>

                            <br>

                            <button type="button" class="btn btn-light" data-toggle="button" aria-pressed="false" autocomplete="off">
                                Single toggle
                            </button>

                            <br>
                            <br>
                            <br>

                            <h3 class="card-body__title">Checkbox and radio buttons</h3>
                            <p>Bootstrap’s <code>.button</code> styles can be applied to other elements, such as &#x3C;label&#x3E;s, to provide checkbox or radio style button toggling.</p>

                            <br>


                            <div class="btn-group" data-toggle="buttons">
                                <label class="btn btn-light active">
                                    <input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
                                </label>
                                <label class="btn btn-light">
                                    <input type="checkbox" autocomplete="off"> Checkbox 2
                                </label>
                                <label class="btn btn-light">
                                    <input type="checkbox" autocomplete="off"> Checkbox 3
                                </label>
                            </div>

                            <br>
                            <br>

                            <div class="btn-group" data-toggle="buttons">
                                <label class="btn btn-light active">
                                    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
                                </label>
                                <label class="btn btn-light">
                                    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
                                </label>
                                <label class="btn btn-light">
                                    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
                                </label>
                            </div>

                            <br>
                            <br>
                            <br>

                            <div class="btn-group btn-group--colors" data-toggle="buttons">
                                <label class="btn"><input type="checkbox" autocomplete="off" checked></label>
                                <label class="btn bg-blue"><input type="checkbox" autocomplete="off"></label>
                                <label class="btn bg-teal"><input type="checkbox" autocomplete="off"></label>
                                <label class="btn bg-red"><input type="checkbox" autocomplete="off"></label>
                                <label class="btn bg-purple active"><input type="checkbox" autocomplete="off"></label>
                                <label class="btn bg-yellow"><input type="checkbox" autocomplete="off"></label>
                                <label class="btn bg-cyan"><input type="checkbox" autocomplete="off"></label>
                            </div>

                            <br>
                            <br>

                            <div class="btn-group btn-group--colors" data-toggle="buttons">
                                <label class="btn"><input type="radio" name="notes-color" autocomplete="off" checked></label>
                                <label class="btn bg-blue"><input type="radio" name="notes-color" autocomplete="off"></label>
                                <label class="btn bg-teal active"><input type="radio" name="notes-color" autocomplete="off"></label>
                                <label class="btn bg-red"><input type="radio" name="notes-color" autocomplete="off"></label>
                                <label class="btn bg-purple"><input type="radio" name="notes-color" autocomplete="off"></label>
                                <label class="btn bg-yellow"><input type="radio" name="notes-color" autocomplete="off"></label>
                                <label class="btn bg-cyan"><input type="radio" name="notes-color" autocomplete="off"></label>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">Custom Checkboxes</h4>
                            <h6 class="card-subtitle">Custom rounded checkboxes with alphabet characters to use with contacts and related lists</h6>

                            <div class="demo-inline-wrapper">
                                <label class="custom-control custom-control--char">
                                    <input class="custom-control-input" type="checkbox">
                                    <span class="custom-control--char__helper"><i>A</i></span>
                                </label>
                            </div>

                            <div class="demo-inline-wrapper">
                                <label class="custom-control custom-control--char">
                                    <input class="custom-control-input" type="checkbox">
                                    <span class="custom-control--char__helper"><i>C</i></span>
                                </label>
                            </div>

                            <div class="demo-inline-wrapper">
                                <label class="custom-control custom-control--char">
                                    <input class="custom-control-input" type="checkbox">
                                    <span class="custom-control--char__helper"><i>V</i></span>
                                </label>
                            </div>

                            <div class="demo-inline-wrapper">
                                <label class="custom-control custom-control--char">
                                    <input class="custom-control-input" type="checkbox">
                                    <span class="custom-control--char__helper"><i>Z</i></span>
                                </label>
                            </div>

                            <div class="demo-inline-wrapper">
                                <label class="custom-control custom-control--char">
                                    <input class="custom-control-input" type="checkbox">
                                    <span class="custom-control--char__helper"><i>X</i></span>
                                </label>
                            </div>

                            <div class="demo-inline-wrapper">
                                <label class="custom-control custom-control--char">
                                    <input class="custom-control-input" type="checkbox">
                                    <span class="custom-control--char__helper"><i>S</i></span>
                                </label>
                            </div>

                            <br>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">Icon Toggles (Checkbox)</h4>
                            <h6 class="card-subtitle">Icon toggles are customized checkboxes to use with icon toggles. Icon toggles are much useful when you have icon toggle elements such as favourites, thumbs ups, thumbs downs etc.</h6>

                            <h3 class="card-body__title">Default stat</h3>
                            <p>Click on the icons below to toggle the stat.</p>

                            <div class="icon-toggle">
                                <input type="checkbox">
                                <i class="zmdi zmdi-flag"></i>
                            </div>

                            <div class="icon-toggle">
                                <input type="checkbox">
                                <i class="zmdi zmdi-star"></i>
                            </div>

                            <div class="icon-toggle">
                                <input type="checkbox">
                                <i class="zmdi zmdi-thumb-up"></i>
                            </div>

                            <div class="icon-toggle">
                                <input type="checkbox">
                                <i class="zmdi zmdi-thumb-down"></i>
                            </div>

                            <div class="icon-toggle">
                                <input type="checkbox">
                                <i class="zmdi zmdi-check"></i>
                            </div>

                            <div class="icon-toggle">
                                <input type="checkbox">
                                <i class="zmdi zmdi-circle"></i>
                            </div>

                            <br>
                            <br>
                            <br>

                            <h3 class="card-body__title">Active (checked) stat</h3>
                            <p>Click on the icons below to toggle the stat.</p>

                            <div class="icon-toggle">
                                <input type="checkbox" checked>
                                <i class="zmdi zmdi-flag"></i>
                            </div>

                            <div class="icon-toggle">
                                <input type="checkbox" checked>
                                <i class="zmdi zmdi-star"></i>
                            </div>

                            <div class="icon-toggle">
                                <input type="checkbox" checked>
                                <i class="zmdi zmdi-thumb-up"></i>
                            </div>

                            <div class="icon-toggle">
                                <input type="checkbox" checked>
                                <i class="zmdi zmdi-thumb-down"></i>
                            </div>

                            <div class="icon-toggle">
                                <input type="checkbox" checked>
                                <i class="zmdi zmdi-check"></i>
                            </div>

                            <div class="icon-toggle">
                                <input type="checkbox" checked>
                                <i class="zmdi zmdi-circle"></i>
                            </div>

                            <br>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">WYSIWYG Editor</h4>
                            <h6 class="card-subtitle">Trumbowyg is Light, translatable and customisable jQuery plugin. Beautiful design, generates semantic code, comes with a powerful API.</h6>

                            <div class="wysiwyg-editor"></div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">Ratings</h4>
                            <h6 class="card-subtitle">RateYo! is a tiny and flexible jQuery star rating plugin, it uses SVG to render rating, so no images required.</h6>

                            <h3 class="card-body__title">Basic example</h3>
                            <p>Basic RateYo examples with start width and rating values.</p>

                            <div class="rating-demo">
                                <div class="rating" data-rateyo-star-width="20px" data-rating="0"></div>
                                <div class="rating" data-rateyo-star-width="20px" data-rating="1"></div>
                                <div class="rating" data-rateyo-star-width="20px" data-rating="2"></div>
                                <div class="rating" data-rateyo-star-width="20px" data-rating="3"></div>
                                <div class="rating" data-rateyo-star-width="20px" data-rating="4"></div>
                                <div class="rating" data-rateyo-star-width="20px" data-rating="5"></div>
                            </div>

                            <br>
                            <br>

                            <h3 class="card-body__title">Sizing</h3>
                            <p>Different sizes can be set using data attribute <code>data-rateyo-star-width</code>.</p>

                            <div class="rating-demo">
                                <div class="rating" data-rateyo-star-width="10px" data-rating="0"></div>
                                <div class="rating" data-rateyo-star-width="20px" data-rating="1"></div>
                                <div class="rating" data-rateyo-star-width="30px" data-rating="2"></div>
                                <div class="rating" data-rateyo-star-width="40px" data-rating="3"></div>
                            </div>

                            <br>
                            <br>

                            <h3 class="card-body__title">Rated fill color</h3>
                            <p>The color for the rated part of a star. You can set this option using <code>data-rateyo-rated-fill</code> attribute.</p>

                            <div class="rating-demo">
                                <div class="rating" data-rateyo-star-width="20px" data-rating="2" data-rateyo-rated-fill="#dc3545"></div>
                                <div class="rating" data-rateyo-star-width="20px" data-rating="3" data-rateyo-rated-fill="#007bff"></div>
                                <div class="rating" data-rateyo-star-width="20px" data-rating="4" data-rateyo-rated-fill="#20c997"></div>
                                <div class="rating" data-rateyo-star-width="20px" data-rating="5" data-rateyo-rated-fill="#fd7e14"></div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">Text Counter</h4>
                            <h6 class="card-subtitle">jQuery plugin to count words or characters and enforce min/max requirements.</h6>

                            <div class="row">
                                <div class="col-md-4">
                                    <h3 class="card-body__title">Basic example</h3>
                                    <p>Basic text counter with least options enabled</p>

                                    <br>

                                    <div class="form-group">
                                        <textarea class="form-control textarea-autosize text-counter" placeholder="Start typing..."></textarea>
                                        <i class="form-group__bar"></i>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <h3 class="card-body__title">Maximum limit counter</h3>
                                    <p>Fires when a counter reaches the maximum word/character count.</p>

                                    <br>

                                    <div class="form-group">
                                        <textarea class="form-control textarea-autosize text-counter" data-max-length="100" placeholder="Start typing... (Max set to 100)"></textarea>
                                        <i class="form-group__bar"></i>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <h3 class="card-body__title">Minimum counter</h3>
                                    <p>Fires when a counter reaches the minimum word/character count</p>

                                    <br>

                                    <div class="form-group">
                                        <textarea class="form-control textarea-autosize text-counter" data-min-length="10" placeholder="Start typing... (Min set to 10)"></textarea>
                                        <i class="form-group__bar"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <footer class="footer hidden-xs-down">
                    <p>© Super Admin Responsive. All rights reserved.</p>

                    <ul class="nav footer__nav">
                        <a class="nav-link" href="">Homepage</a>

                        <a class="nav-link" href="">Company</a>

                        <a class="nav-link" href="">Support</a>

                        <a class="nav-link" href="">News</a>

                        <a class="nav-link" href="">Contacts</a>
                    </ul>
                </footer>
            </section>
        </main>

        <!-- Older IE warning message -->
            <!--[if IE]>
                <div class="ie-warning">
                    <h1>Warning!!</h1>
                    <p>You are using an outdated version of Internet Explorer, please upgrade to any of the following web browsers to access this website.</p>

                    <div class="ie-warning__downloads">
                        <a href="/www.google.com/chrome">
                            <img src="img/browsers/chrome.png" alt="">
                        </a>

                        <a href="https://www.mozilla.org/en-US/firefox/new">
                            <img src="img/browsers/firefox.png" alt="">
                        </a>

                        <a href="/www.opera.com">
                            <img src="img/browsers/opera.png" alt="">
                        </a>

                        <a href="https://support.apple.com/downloads/safari">
                            <img src="img/browsers/safari.png" alt="">
                        </a>

                        <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">
                            <img src="img/browsers/edge.png" alt="">
                        </a>

                        <a href="/windows.microsoft.com/en-us/internet-explorer/download-ie">
                            <img src="img/browsers/ie.png" alt="">
                        </a>
                    </div>
                    <p>Sorry for the inconvenience!</p>
                </div>
            <![endif]-->

        <!-- Javascript -->
        <!-- Vendors -->
        <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
        <script src="vendors/bower_components/popper.js/dist/umd/popper.min.js"></script>
        <script src="vendors/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
        <script src="vendors/bower_components/jquery.scrollbar/jquery.scrollbar.min.js"></script>
        <script src="vendors/bower_components/jquery-scrollLock/jquery-scrollLock.min.js"></script>

        <script src="vendors/bower_components/jquery-mask-plugin/dist/jquery.mask.min.js"></script>
        <script src="vendors/bower_components/select2/dist/js/select2.full.min.js"></script>
        <script src="vendors/bower_components/dropzone/dist/min/dropzone.min.js"></script>
        <script src="vendors/bower_components/moment/min/moment.min.js"></script>
        <script src="vendors/bower_components/flatpickr/dist/flatpickr.min.js"></script>
        <script src="vendors/bower_components/nouislider/distribute/nouislider.min.js"></script>
        <script src="vendors/bower_components/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script>
        <script src="vendors/bower_components/trumbowyg/dist/trumbowyg.min.js"></script>
        <script src="vendors/bower_components/rateYo/min/jquery.rateyo.min.js"></script>
        <script src="vendors/bower_components/jquery-text-counter/textcounter.min.js"></script>
        <script src="vendors/bower_components/autosize/dist/autosize.min.js"></script>

        <!-- App functions and actions -->
        <script src="js/app.min.js"></script>
    </body>
</html>